<template>
    <div class="project-layout">
        <header-view>
            <div class="icon"></div>
            <div class="title">项目</div>
            <!--<img src="../../assets/image/screen.png" alt="" class="icon" @click="isShowProject = !isShowProject">-->
            <img src="../../assets/image/list.png" alt="" class="icon" @click="isShowList = !isShowList">
        </header-view>
        <div class="content">
            <!--<div class="sort" @click.stop="isShowDrop = true">-->
                <!--<img :src="isShowDrop?require('../../assets/image/drop-up.png'): require('../../assets/image/drop-down.png')" class="icon-22" alt="">-->
                <!--<span class="font sort-title">{{sortTitle}}</span>-->
            <!--</div>-->
            <ul class="project-list" v-if="isShowList">
                <li class="drop-item" v-for="(d,index) in projectList.dataList" :key="index" @click.stop="getProjectFolder(d)">
                    <div class="circle" :class="getTagBackground(index)">{{d.name.substring(0,1)}}</div>
                    <div class="desc">
                        <p class="desc-title">{{d.name}}</p>
                        <p>创建人：<span>{{d.userName}}</span> <span>{{d.createTime}}</span></p>
                    </div>
                    <img v-if="userInfo.userId === d.userId" src="../../assets/image/more.png" alt="" class="more" @click.stop="onShowMore(d)">
                </li>
            </ul>
            <ul class="gird-layout" v-else>
                <li class="gird-item" v-for="(d,index) in projectList.dataList" :key="index" @click.stop="getProjectFolder(d)">
                    <div class="proLogo"><img :src="getLogo('project', d.id)" alt=""></div>
                    <div class="gird-option">
                        <div class="gird-name">{{d.name}}</div>
                        <div class="opt" v-if="userInfo.userId === d.userId">
                            <img src="../../assets/image/edit2.png" alt="" class="icon-30" @click.stop="onEdit2(d)">
                            <img src="../../assets/image/delete2.png" alt="" class="icon-30" @click.stop="onDelete2(d)">
                        </div>
                    </div>
                </li>
            </ul>
            <div class="drop-layout" v-if="isShowDrop">
                <dialog-drop-view :data="dropMenu"/>
            </div>
            <div class="drop-layout" v-if="isShowAdd">
                <ul class="drop-dialog">
                    <div class="add" @click.stop="isAddProject">
                      <img src="../../assets/image/add-project.png" alt="">
                      <span style="opacity: 0.7;" class="font-large">新建项目</span>
                    </div>
                    <div class="add" @click.stop="">
                      <img src="../../assets/image/no-add-folder.png" alt="">
                      <span style="opacity: 0.7;" class="font-large">新建文件夹</span>
                    </div>
                    <div class="add" @click.stop="">
                      <img src="../../assets/image/no-add-file.png" alt="">
                      <span style="opacity: 0.7;" class="font-large">新建文档</span>
                    </div>
                </ul>
            </div>
            <div class="drop-layout" v-if="isShowAddDialog">
                <dialog-add-view @callback="addProject" :dialogTitle="projectName"/>
            </div>
            <div class="drop-layout" v-if="isShowMore">
                <div class="drop" @click.stop="">
                    <div class="item-title">{{optionForm && optionForm.name}}</div>
                    <ul class="item-list">
                        <li class="option" @click.stop="onEdit"><img src="../../assets/image/rename.png" alt=""><span>重命名</span></li>
                        <li class="option"><img src="../../assets/image/del.png" alt="" @click.stop="onDelete"><span>删除</span></li>
                    </ul>
                </div>
            </div>
            <div class="drop-layout" v-if="isShowEdit">
                <dialog-add-view @callback="editProject" :data="optionForm" :is-edit="true"/>
            </div>
          <div class="drop-layout" v-if="isShowConfirm">
            <dialog-confirm-view @callback="deleteProject"/>
          </div>
        </div>
    </div>
</template>

<script>
    import DialogDropView from '../common/DialogDropView';
    import DialogAddView from '../common/DialogAddView';
    import DialogConfirmView from '../common/DialogConfirmView';
    import HeaderView from '../common/HeaderView';

    import { getProjectPage, addProject, updateProject, deleteProject } from '../../api/home'

    export default {
        name: 'Project',
        components: { DialogDropView, DialogAddView, HeaderView, DialogConfirmView },
        props: ['isShowAdd'],
        data() {
            return {
                sortTitle: '按更新时间排序',
                isShowDrop: false,
                dropMenu: this.global.dropMenu,
                projectItemList: [],
                projectList: [],
                isShowProject: false,
                isShowAddDialog: false,
                searchName: '',
                isShowMore: false,
                optionForm: null,
                isShowEdit: false,
                isShowFolder: false,
                isShowList: true,
                userInfo: JSON.parse(localStorage.getItem('userInfo')),
                isShowConfirm: false,
                projectName: '项目名称'
            }
        },
        mounted() {
          // console.log(this.$store.state.index.userInfo)
            this.getProjectList();
            document.addEventListener('click', () => {
                if(this.isShowMore)
                    this.isShowMore = false;
                if(this.isShowDrop)
                    this.isShowDrop = false;
            })
        },
        computed: {
            authority() {
                return this.$store.state.index.authority
            },
        },
        methods: {
            //获取项目列表
            getProjectList() {
                getProjectPage(200, 1, this.searchName)
                    .then(result => {
                        const { data } = result;
                        this.projectList = data;
                        sessionStorage.projectId = data.dataList[0].id;
                        sessionStorage.projectName = data.dataList[0].name;
                        // this.getProjectItemList()
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            getTagBackground(index) {
                if (index === this.projectList.dataList.length) {
                    return {
                        'tag-bg3': true,
                    };
                }
                switch (index % 4) {
                    case 0:
                        return {
                            'tag-bg0': true,
                        };
                    case 1:
                        return {
                            'tag-bg1': true,
                        };
                    case 2:
                        return {
                            'tag-bg2': true,
                        };
                    case 3:
                        return {
                            'tag-bg3': true,
                        };
                }
            },
            // 添加项目
            isAddProject() {
                this.isShowAddDialog = true;
                this.$parent.isShowAdd = false;
            },
            addProject(type, content) {
                if (type === '2' && content === '') {
                    return;
                }
                if(type === '1') {
                    this.isShowAddDialog = false;
                    this.isShowProject= false;
                }else {
                    addProject({
                        name: content,
                        // ename: this.addProjectData.ename,
                        // description: this.addProjectData.description
                    })
                        .then(result => {
                            this.getProjectList()
                            console.log(result)
                        })
                        .catch(err => {
                            console.log(err)
                        });
                    this.$toast('添加成功');
                    this.isShowAddDialog = false;
                    this.isShowProject= false;
                }
            },
            getProjectFolder(d) {
                sessionStorage.projectId = d.id;
                sessionStorage.projectName = d.name;
                sessionStorage.project = JSON.stringify(d);
                this.$store.commit('index/set_projectName', d.name);
                this.$router.push({ name: 'projectFolder', params: { info: d }})
            },
            onShowMore(d) {
                this.isShowMore = true;
                this.optionForm = d;
            },
            onEdit() {
                this.isShowEdit = true;
                this.isShowMore = false;
            },
            onEdit2(d) {
                this.isShowEdit = true;
                this.isShowMore = false;
                this.optionForm = d;
            },
            editProject(type,content) {
                if (type === '2' && content === '') {
                    return;
                }
                if(type === '1') {
                    this.isShowEdit = false;
                    this.isShowMore = false;
                }else {
                    updateProject({
                        id: this.optionForm.id,
                        name: content,
                        ename: null,
                        description: null
                    })
                        .then(() => {
                            this.optionForm.name = content;
                            this.$toast('修改成功');
                            this.isShowEdit = false;
                            this.isShowMore = false;
                        })
                        .catch(err => {
                            console.log(err)
                        })
                }
            },
          // 删除
          onDelete() {
            this.isShowConfirm = true;
            this.isShowMore = false;
          },
          onDelete2(d) {
              this.isShowConfirm = true;
              this.isShowMore = false;
              this.optionForm = d;
          },
            deleteProject(type) {
              if(type === '1') {
                this.isShowConfirm = false;
                return;
              }
              if(type === '2') {
                const id = this.optionForm.id;
                deleteProject(id)
                    .then(result => {
                      this.projectList.dataList.splice(
                          this.projectList.dataList.findIndex(v => v.id === id),
                          1
                      )
                      console.log(this.projectList)
                      this.$toast('删除成功');
                      this.isShowEdit = false;
                      this.isShowMore = false;
                      this.isShowConfirm = false;
                      console.log(result)
                    })
                    .catch(err => {
                      console.log(err)
                    })
              }

            },
        }
    }
</script>

<style scoped>
    .project-layout {

    }
    .title {
        flex: 1;
    }
    .content {
        background: #F5F8FB;
        min-height: 100vh;
        margin-top: 135px;
    }
    .sort {
        height: 70px;
        background: #fff;
        padding: 0 40px;
        text-align: center;
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        position: relative;
    }
    .sort-title {
        font-size: 24px;
        color: #484848;
        opacity: .8;
        margin-left: 20px;
    }
    .project-list {
        padding: 20px 25px;
    }
    .list-item {
        /*width: 700px;*/
        height: 130px;
        background: #FFFFFF;
        box-shadow: 0 6px 9px 0 rgba(0, 120, 255, 0.05);
        border-radius: 30px;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }
    .list-item .left {
        display: flex;
        text-align: left;
        align-items: center;
    }
    .list-item .left .type {
        height: 50px;
        margin-right: 20px;
    }
    .content-title {
        font-size: 26px;
        color: #191919;
        padding-bottom: 20px;
    }
    .desc {
        font-size: 18px;
        color: #C8C8C8;
    }
    .more {
        height: 38px;
    }
    /*网格显示*/
    .gird-layout {
        display: flex;
        flex-wrap: wrap;
        padding: 0 25px;
    }
    .gird-item {
        width: 47%;
        /*height: 300px;*/
        background: #fff;
        border-radius: 6px;
        margin-right: 20px;
        margin-bottom: 40px;
        padding: 10px;
        box-sizing: border-box;
    }
    .proLogo {
        height: 200px;
    }
    .proLogo img {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
    .gird-item .gird-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
    }
    .gird-name {
        font-size: 22px;
        font-weight: normal;
        flex: 1;
    }
    .opt {
        font-size: 0;
    }
    .opt img {
        margin-right: 10px;
    }
    /*弹窗*/
    .drop-layout {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.3);
        z-index: 9999;
    }
    .drop-dialog {
        width: 700px;
        height: 300px;
        background: #F9F7F7;
        border-radius: 40px 40px 0 0;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 15px 110px;
        overflow-y: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .drop-item {
        height: 130px;
        background: #FFFFFF;
        border-radius: 30px;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        /*justify-content: space-between;*/
    }

    .drop-dialog .add {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }

    .drop-dialog .add img {
      width: 120px;
      height: 120px;
    }

    .circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 20px;
        font-size: 40px;
        color: #fff;
        text-align: center;
        line-height: 80px;
    }
    .tag-bg0 {
        background: rgb(134, 242, 223);
    }
    .tag-bg1 {
        background: rgb(166, 205, 255);
    }
    .tag-bg2 {
        background: rgb(205, 166, 253)
    }
    .tag-bg3 {
        background: rgb(126, 225, 255);
    }
    .drop-item .desc {
        text-align: left;
        flex: 1;
    }
    .drop-item .circle-right {
        width: 30px;
        height: 30px;
    }
    .drop-item .desc .desc-title {
        font-size: 32px;
        font-weight: 500;
        color: #181818;
        margin-bottom: 17px;
    }
    .drop {
        width: 650px;
        height: 360px;
        background: #FFFFFF;
        border-radius: 40px 40px 0 0;
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: center;
        padding: 30px 50px 0;
    }
    .drop .item-title {
        font-size: 28px;
        font-weight: normal;
        color: #181818;
        opacity: 0.7;
        margin-bottom: 53px;
    }
    .drop .item-list {
        display: flex;
        justify-content: space-around;
    }
    .option {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .option img {
        width: 120px;
        height: 120px;
    }
    .option span {
        font-size: 18px;
        font-weight: normal;
        color: #000000;
        opacity: 0.7;
    }
    .confirm {
      width: 700px;
      height: 300px;
      background: #FFFFFF;
      box-shadow: 1px 20px 20px 0 rgba(0, 0, 0, 0.05);
      border-radius: 40px;
      position: absolute;
      top: 30%;
      right: 50%;
      transform: translate(50%);
    }

    .confirm .text {
      text-align: center;
      margin-top: 73px;
      box-sizing: border-box;
      margin-bottom: 54px;
    }
</style>